<template>
  <div class="app-container">
    <!-- <el-card class="mar_bottom">
      <el-search-form label-width="90px" @search="onSearch" @reset="onReset">
        <el-form-item style="margin-top: 5px">
          <el-input size="small" v-model="searchBody.name" style="width: 260px">
            <el-select
              class="search_select"
              v-model="searchType"
              slot="prepend"
              placeholder="请选择"
            >
              <el-option label="名称" value="1"></el-option>
              <el-option label="显示名称" value="2"></el-option>
              <el-option label="id" value="3"></el-option>
            </el-select>
          </el-input>
        </el-form-item>
      </el-search-form>
    </el-card> -->
    <el-card>
      <div class="flex-vc just_betwwen" slot="header">
        <div>
          <el-button
            type="primary"
            size="small"
            @click="handleClick('exportOut')"
            >导出城市数据</el-button
          >
          <el-upload
            style="display: inline-block"
            ref="uploadJiesuan"
            :show-file-list="false"
            action
            accept=".xlsx"
            :http-request="uploadData"
            :before-upload="beforeUpload"
          >
            <el-button type="primary" style="margin-left: 10px" size="small"
              >导入城市数据</el-button
            >
          </el-upload>
          <el-button
            type="success"
            size="small"

            @click="handleClick('setSysRegionNoPrice')"
          >设置系统区域（无价格）</el-button>
        </div>
        <div>
          <el-button
            title="刷新"
            icon="el-icon-refresh-right"
            size="medium"
            circle
            @click="getData"
          ></el-button>
          <el-dropdown :hide-on-click="false" trigger="click">
            <el-button
              style="margin-left: 10px"
              title="筛选列"
              icon="el-icon-menu"
              size="medium"
              circle
            ></el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item, idx) in tableColumn" :key="idx">
                <el-checkbox v-model="item.checked">{{
                  item.label
                }}</el-checkbox>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <el-table
        ref="Table"
        :data="list"
        row-key="id"
        border
        @row-click="handleRowClick"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        @selection-change="handleSelectionChange">
      >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          label="ID"
          prop="id"
          width="100">
        </el-table-column>
        <el-table-column
          label="CODE"
          prop="code"
        ></el-table-column>
        <el-table-column
          label="类型"
        >

          <template slot-scope="scope">
            <el-tag
              :type="scope.row.type === 1 ? 'success' : scope.row.type === 2 ? 'info' : 'warning'"
              disable-transitions>{{scope.row.type === 1 ? '省份' : scope.row.type === 2 ? '城市' : '区域'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="名称"
          prop="name"
        ></el-table-column>
        <el-table-column
          label="简称"
          prop="name"
        ></el-table-column>
        <el-table-column
          label="金额"
          prop="price"
        ></el-table-column>
        <el-table-column
          label="是否启用"
        >

          <template slot-scope="scope">
            <el-button
              :type = "scope.row.isOpen == '1' ? 'danger' : 'success' "
              @click="onSwitchChange(scope.row)"
            >
              {{scope.row.isOpen == '1' ? '关闭' : '开启'}}
            </el-button>


          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import {
  selectRegionTree,
  exportSysRegion,
  exportInSysRegion,
  setSysRegionCacheNoPrice,
  setRegionIsOpen
} from "@/api/api.js";
import { downloadFile } from "@/utils/index";
import {sysuser_setOpen} from "@/api/platformSys";

const getDefaultSearchBody = () => ({
  name: null,
});
export default {
  data() {
    return {
      selectIds:[],
      searchType: "1",
      pageNo: 1,
      pageSize: 20,
      totalCount: 0,
      pageSizeOpts: [20, 50, 100, 300, 500],
      list: [],
      searchBody: getDefaultSearchBody(),
      tableColumn: [
        {
          label: "ID",
          checked: true,
        },
        {
          label: "名称",
          checked: true,
        },
        {
          label: "简称",
          checked: true,
        },
        {
          label: "系统奖励",
          checked: true,
        },
      ],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      selectRegionTree().then(({ result }) => {
        this.list = result || [];
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getData();
    },
    handleSelectionChange(val) {
      this.selectIds = val.map((d) => d.id);
    },
    onSearch() {
      this.pageNo = 1;
      this.getData();
    },
    onReset() {
      this.pageNo = 1;
      this.searchBody = getDefaultSearchBody();
      this.getData();
    },
    handleRowClick(row) {
      this.$refs.Table.toggleRowExpansion(row);
    },
    handleClick(type, row) {
      switch (type) {
        case "setSysRegionNoPrice":
          setSysRegionCacheNoPrice().then((res) => {

            this.$message.success(res.msg || "操作成功");
          });
          break;
        case "exportOut":
          exportSysRegion().then((res) => {
            let fileName = res.headers["content-disposition"].replaceAll(
              /.*?filename=(.*?)/g,
              "$1"
            );
            downloadFile(res.data, decodeURI(fileName), "blob");
            this.$message.success("导出成功");
          });
          break;
        case "exportIn":
          break;
        default:
          return;
      }
    },

    onSwitchChange( row) {
      setRegionIsOpen({
        id: row.id
      }).then((res) => {
        this.getData();
      });
    },
    uploadData(params) {
      const form = new FormData();
      form.append("file", params.file);
      const loading = this.$loading({
        lock: true,
        text: "正在导入...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      exportInSysRegion(form)
        .then((res) => {
          this.$message.success("导入成功");
          loading.close();
        })
        .catch(() => {
          loading.close();
        });
    },
    beforeUpload(file) {
      if (file.size > 1 * 1024 * 1024) {
        this.$message.warning("上传的文件大小不能超过1MB!");
        return false;
      }
    },
  },
};
</script>
